<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度条体验任务轮询</title>
    <style>
        .show{
            height: 50px;
            width: 0px;
            background-color: saddlebrown;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
    </style>
</head>
<body>
    <div class="show"></div>
</body>
<script>
    /*
        根据以上的例子就可以很好的理解任务队列 每次执行了结束以后都会向任务队列里面添加
            结束之后又添加 直到达到了我们要的效果位置
    */
    let show = document.querySelector('.show')
    function handle(){
        let i = 0;
        (function run(){
            if(++i<=100){
                console.log(i)
                if(++i <= 100){
                    show.style.width = i+'%'
                    show.innerHTML = i
                    setTimeout(run,50)
                }
            }
        })()
    }
    handle()
</script>
</html>